<template>
  <div>
    <basic-container>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :table-loading="tableLoading"
        :page="page"
        ref="crud"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-click="handleClick"
        @refresh-change="handleList"
      >
        <template slot-scope="scope" slot="sold_count">{{scope.row.sold_count}}</template>

        <template slot-scope="scope" slot="review_count">{{scope.row.review_count}}</template>

        <template slot-scope="scope" slot="on_sale">
          <el-button
            v-if="scope.row.on_sale"
            type="danger"
            @click="handleSale(scope.row,false)"
            size="small"
          >下架</el-button>
          <el-button v-else type="primary" @click="handleSale(scope.row,true)" size="small">上架</el-button>
        </template>

        <template slot="menuLeft">
          <div class="el-form el-form--inline">
            <div class="el-form-item">
              <el-button type="primary" @click="handleAdd()" size="small">添加商品</el-button>
            </div>

            <div class="el-form-item">
              <el-select v-model="saleFlag" placeholder="请选择" @change="handleList(true)">
                <el-option label="全部" value="0"></el-option>
                <el-option label="已上架" value="1"></el-option>
                <el-option label="未上架" value="2"></el-option>
              </el-select>
            </div>

            <div class="el-form-item">
              <el-input v-model="search" placeholder="请输入产品名称"></el-input>
            </div>
            <div class="el-form-item">
              <el-button type="primary" @click="handleList(true)" size="small">搜索</el-button>
            </div>
          </div>
        </template>
        <template slot-scope="scope" slot="menu" style="width:100px">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </avue-crud>

      <add-product ref="add-product" :showDetail="addDetail" @refresh="handleList"></add-product>
      <edit-product ref="edit-product" :id="selectRow.id" :showDetail="showDetail" @refresh="handleList"></edit-product>
    </basic-container>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from "vuex";
import crudMixin from '@/mixins/crud'
import options from "./options.js";
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import { field, reField } from "./field";
import addProduct from "../addProduct";
import editProduct from "../editProduct";


export default {
  name: "role",
  mixins: [crudMixin],
  components: {
    addProduct, editProduct
  },
  data() {
    return Object.assign({}, options, {
      showDetail: false,
      addDetail: false,  //添加
      productForm: {},
      selectRow: {},
      search: '',
      saleFlag: "0"  //上架状态
    })
  },
  created() {
    //初始化数据格式
    this.handleList();
  },
  watch: {},
  mounted() { },
  computed: {
  },
  props: [],
  methods: {
    handleList(init = false) {
      if (init)
      {
        this.page.currentPage = 1
      }
      this.tableLoading = true;
      let param = Object.assign({}, {
        perPage: this.page.pageSize,
        page: this.page.currentPage,
        search: this.search,
        sale: this.saleFlag
      });
      var vm = this
      this.tableData = [];
      this.page.total = 0;

      this.$store
        .dispatch("GetProductList", param)
        .then(
          res => {
            this.tableLoading = false;
            if (res.data.status == 1)            {
              let _data = res.data.result.data || []
              let _meta = res.data.result.meta || []

              this.tableData = arr2pojo(_data, reField) || [];
              this.page.total = _meta.total;
            }
          }, error => {
            this.tableLoading = false;
          })
    },
    handleEdit(row) {
      this.selectRow = row
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs["edit-product"].handleShow(row.id)
      })
    },
    handleAdd() {
      this.addDetail = true
      this.$nextTick(() => {
        this.$refs["add-product"].handleShow()
      })
    },
    handleSale(row, flag) {
      const data = {
        id: row.id,
        on_sale: flag
      }
      this.$store.dispatch('UpdateProductSale', obj2pojo(data, field))
        .then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          console.log(row.$index)
          this.tableData[row.$index].on_sale = flag
          //this.handleList();
        });
    },
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  margin-left: 10px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload--picture-card {
  width: 120px;
  height: 120px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>